<template>
    <div ref="MapView" style="width:100%;height:100%">
        <div class="control">
            <br>
            x: (翻滚角)<Slider v-model="x" :min="-360" :max="360"></Slider>
            y: (俯仰角)<Slider v-model="y" :min="-360" :max="360"></Slider>
            z: (航向角)<Slider v-model="z" :min="-360" :max="360"></Slider>

            ------------------------------------------------------------------------------------------------------------------------------------------------------
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
import gsap from 'gsap';
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}

// 由于方位变换属性需要用到 坐标，故放在外面
let l = Cesium.Cartesian3.fromDegrees(117.224, 31.819, 200000);
let Line = null;

var pointBPosition = [Cesium.Cartesian3.fromDegrees(117.224, 31.819, 200000), Cesium.Cartesian3.fromDegrees(117.224, 31.819, 0)];
var _update = () => {
    return pointBPosition;
}


var position = Cesium.Cartesian3.fromDegrees(119, 40, 150000)
var heading = Cesium.Math.toRadians(0)
var pitch = Cesium.Math.toRadians(0)
var roll = Cesium.Math.toRadians(0)
var headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll)

var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())




export default {
    data() {
        return {
            SenceMode: '3D',
            x: 0,
            y: 0,
            z: 0,
        }
    },
    watch: {
        x() {
            this.PointB();
        },
        y() {
            this.PointB();
        },
        z() {
            this.PointB();
        },
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                senceMode: this.SenceMode, // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        var viewer = map.getViewer();
        viewer.entities.add({
            position: l,
            point: {
                show: true, //是否展示
                pixelSize: 4, //点的大小
                color: Cesium.Color.YELLOW, //颜色
                outline: true,
                outlineWidth: 1,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
        });

        console.log(viewer);



        Line = viewer.entities.add({
            position: l,
            polyline: {
                positions: new Cesium.CallbackProperty(_update, false),
                material: new Cesium.Color(1, 0, 0, 1),  // 线的颜色
                width: 1, // 宽度
            }
        });





    },
    methods: {
        PointB() {
            var viewer = map.getViewer();

            // 获取一个WGS84点的坐标点对应的世界坐标
            let pos = l;
            // 本地坐标在世界坐标中的变换矩阵
            let _LocalToWorldMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(pos);
            // 在本地坐标
            let _localPos = new Cesium.Cartesian3(0, 0, -6371000);
            // 将本地坐标转世界坐标
            // let RX = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(this.x));
            // let Matrix4X = Cesium.Matrix4.multiplyByMatrix3(_LocalToWorldMatrix, RX, new Cesium.Matrix4());
            // let RY = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(this.y));
            // let Matrix4Y = Cesium.Matrix4.multiplyByMatrix3(Matrix4X, RY, new Cesium.Matrix4());
            // let RZ = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(this.z));
            // let Matrix4Z = Cesium.Matrix4.multiplyByMatrix3(Matrix4Y, RZ, new Cesium.Matrix4());
            // 


            var heading = Cesium.Math.toRadians(this.x)
            var pitch = Cesium.Math.toRadians(this.y)
            var roll = Cesium.Math.toRadians(this.z)
            var headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll)

            var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(l, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())

            let _worldPointX = Cesium.Matrix4.multiplyByPoint(modelMatrix, _localPos, new Cesium.Cartesian3());


            let result = new Cesium.Cartesian3();
            let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(_worldPointX, l, result), result);
            var _ray = new Cesium.Ray(l, direction)

            var intersection = Cesium.IntersectionTests.rayEllipsoid(_ray, viewer.scene.globe.ellipsoid);
            if (intersection) {
                var p = Cesium.Ray.getPoint(_ray, intersection.start);
                pointBPosition = [l, p]
            }





        },
        rgba2Color(value) {
            const regex = /(?<=\().+?(?=\))/g; // [] 中括号    
            var _value = value.match(regex)[0].split(',');
            return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
        },
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>